import QtQuick
import QtQuick.Layouts

Rectangle {
    id: card
    
    property string title: ""
    property var value: 0
    property string unit: ""
    property string icon: "📊"
    property color statusColor: "#3498db"
    property bool isAlert: false
    property bool clickable: false
    signal clicked()
    
    color: clickable && mouseArea.containsMouse ? "#f8f9fa" : "white"
    radius: 10
    border.color: isAlert ? statusColor : "#e0e0e0"
    border.width: isAlert ? 2 : 1
    
    MouseArea {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: clickable
        cursorShape: clickable ? Qt.PointingHandCursor : Qt.ArrowCursor
        enabled: clickable
        
        onClicked: {
            if (card.clickable) {
                card.clicked()
            }
        }
    }
    
    // 简单阴影效果
    Rectangle {
        anchors.fill: parent
        anchors.margins: -2
        color: "transparent"
        border.color: "#10000000"
        border.width: 3
        radius: parent.radius
        z: -1
    }
    
    // 警告闪烁动画
    SequentialAnimation on border.width {
        running: isAlert
        loops: Animation.Infinite
        NumberAnimation { to: 3; duration: 500 }
        NumberAnimation { to: 2; duration: 500 }
    }
    
    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 20
        spacing: 10
        
        RowLayout {
            Layout.fillWidth: true
            
            Text {
                text: card.icon
                font.pixelSize: 32
            }
            
            Item { Layout.fillWidth: true }
            
            Rectangle {
                width: 8
                height: 40
                color: statusColor
                radius: 4
            }
        }
        
        RowLayout {
            Layout.fillWidth: true
            
            Text {
                text: card.title
                font.pixelSize: 14
                color: "#7f8c8d"
            }
            
            Item { Layout.fillWidth: true }
            
            Text {
                id: valueText
                text: typeof card.value === 'number' ? card.value.toString() : card.value
                font.pixelSize: 36
                font.bold: true
                color: statusColor
                Layout.alignment: Qt.AlignBaseline
                
                // 数值变化动画
                Behavior on text {
                    SequentialAnimation {
                        NumberAnimation { 
                            target: valueText
                            property: "scale"
                            to: 1.1
                            duration: 150
                        }
                        NumberAnimation { 
                            target: valueText
                            property: "scale"
                            to: 1.0
                            duration: 150
                        }
                    }
                }
            }
            
            Text {
                text: card.unit
                font.pixelSize: 18
                color: "#95a5a6"
                Layout.alignment: Qt.AlignBaseline
            }
        }
    }
}

